
import chart from '@/utils/chart.js'
import { formatTimeStamp } from '@/utils/timeUtil'
import { parseNumFloat } from '@/utils/tool'
import { format } from 'silly-datetime'
export default (chartData, time_start, time_end, isOneDay, key, txt) => {
  // 紫色线条 发送字节数
  const sendB = []

  // 绿色线条 发送包数
  const sendP = []

  // 深蓝线条 接受字节数
  const revcB = []

  // 浅蓝线条 接受包数
  const revcP = []

  const yAxis = [
    {
      name: '       ',
      type: 'value',
      ...chart.AXIS_STYLE,
      min: 0,
    },
  ]




  let legendOpt = {
    data: [`${txt}发送字节数(btyes)`, `${txt}发送包数(packets)`, `${txt}接收字节数(btyes)`, `${txt}接收包数(packets)`],
    right: '7%'
  }

  let series = []

  chartData.forEach(item =>{
    sendB.push([
      +new Date(item.upload), item[`net_transmit_bytes_${key}`]
    ])
    sendP.push([
      +new Date(item.upload), item[`net_transmit_packets_${key}`]
    ])
    revcB.push([
      +new Date(item.upload), item[`net_receive_bytes_${key}`]
    ])
    revcP.push([
      +new Date(item.upload), item[`net_receive_packets_${key}`]
    ])
  }) 
  series = [
    {
      data: sendB,
      type: 'line',
      lineStyle: {
        width: chart.lineWidth
      },
      name: `${txt}网卡发送字节数（bytes）`,
      color: '#ca71e6',
      symbol: 'none'  // 去掉小圆点
    },
    {
      data: sendP,
      type: 'line',
      lineStyle: {
        width: chart.lineWidth
      },
      name: `${txt}网卡发送包数（packets）`,
      color: '#74c888',
      symbol: 'none'
    },
    {
      data: revcB,
      type: 'line',
      lineStyle: {
        width: chart.lineWidth
      },
      name: `${txt}网卡接收字节数（bytes）`,
      color: '#7372f5',
      symbol: 'none'  // 去掉小圆点
    },
    {
      data: revcP,
      type: 'line',
      lineStyle: {
        width: chart.lineWidth
      },
      name: `${txt}网卡接收包数（packets）`,
      color: '#72c8f5',
      symbol: 'none'
    },
  ]
  
  let xInterval = Math.ceil((time_end - time_start) / (24 * 3600 * 1000))
  let xAxisConfig = null
  // 选择 一天 的x轴config
  if (isOneDay) {
    xAxisConfig = chart.OneDayX
  } else {
    // 选择 多天 的x轴config
    xAxisConfig = chart.MoreDayX(xInterval)
  }

  let option = {
    legend: {
      ...legendOpt,
      show: true,
      textStyle: {
        color: '#333'
      },
      top: '0%',
      icon: 'circle',
      itemGap: 19,
      itemWidth: 12,
      itemHeight: 12
    },
    grid: {
      top:'45',
      left: '3%',
      right: '4%',
      bottom: '7%',
      containLabel: true
    },
    tooltip: {
      ...chart.TOOLTIP,
      formatter: (params, ticket) => {
        let s = ''
        s = s + formatTimeStamp(params[0].axisValue) + `</br>`

        for (let item of params) {
          let unit = 'B'
          let v = isNaN(item.value[1]) ? item.value[1] : parseNumFloat(item.value[1])
            s += `<span style="color:${item.color}">
                    <span class="tooltip-m">${item.seriesName}: </span>${v}${unit}</span></br>`
        }
        return s
      }
    },
    dataZoom: [{
      type: 'inside',
      throttle: 50
    }],
    xAxis: {
      ...xAxisConfig,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#f0f0f0'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis,
    series
  }
  return option
}
